<template>
    <div>
        <h1>分页</h1>          
        
       
        <button style="border: none; font-size:16px; color: #fff; cursor: pointer;" :class=" [currentPageSet.isReFlash1 ?'info':'primary', currentPageSet.isReFlash1 ? '': 'canHover' ]" @click="changePage(1)">换一换</button>

        <el-select v-model="pageSet.value" placeholder="请选择" @change="selectPage">
            <el-option
                v-for="item in pageSet.pageOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
        </el-select>

        <ul>
            <li v-for="(item,index) in list" :key="index">
                <label>姓名:</label>
                <span>{{item.name}}</span> - 
                 <label>Id:</label>
                <span>{{item.id}}</span>

            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            sourceList: [
                {
                    name: '张三',
                    id: 1
                },
                {
                    name: '李四',
                    id: 2
                },
                {
                    name: '王五',
                    id: 3
                },
                {
                    name: '赵四',
                    id: 4
                },
                {
                    name: '小李',
                    id: 5
                },
                {
                    name: '小何',
                    id: 6
                },
                {
                    name: '小罗',
                    id: 7
                },
                {
                    name: '小张',
                    id: 8
                },
            ],
            list: [],
            currentPageSet:{
                curentPage1: 1,
                isReFlash1: false,
                size: 3
            },

            pageSet:{
                value: 2,
                pageOpt: [{
                value: 2,
                label: 2
                }, {
                value: 3,
                label: 3,
                disabled: true
                }, {
                value: 4,
                label: 4
                }, {
                value: 5,
                label: 5
                }, {
                value: 6,
                label: '全部'
                }
            ],
            }

        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        initData(){
            this.list = this.sourceList.slice(0,3)
        },
        changePage(handType = 1,lateTime = 2000){

            if (this.currentPageSet[`isReFlash${handType}`]) {
                return
            }
            this.currentPageSet[`isReFlash${handType}`] = true
            setTimeout(() =>{
                this.currentPageSet[`isReFlash${handType}`] = false
            },lateTime)
            
            let curIndex = this.currentPageSet[`curentPage${handType}`] * this.currentPageSet.size
            let total = this.sourceList.length
            if (curIndex > total) {
                curIndex = 0
                this.currentPageSet[`curentPage${handType}`]  = 0
            }

            let endIndex = curIndex + this.currentPageSet.size
            this.list = this.sourceList.slice(curIndex,endIndex)
            this.currentPageSet[`curentPage${handType}`] ++
        },
        selectPage(showAll) {
            if (showAll == 6) {
                this.list = this.sourceList.slice(0)
            } else {
                this.list = this.sourceList.slice(0,showAll)
            }
        }
    }
}
</script>
<style>
    .primary {
        background-color: #409eff;
    }
    .info {
        background-color: #a6a9ad;
    }
    .canHover:hover{
        opacity: 0.7;
    }
</style>